/**
 * 使用useMemo，子组件props没改变不重新渲染
 */

import { Button } from "antd";
import { FC, memo, useMemo, useState } from "react";

const schools = ["人大", "北信科"];
const Parent: FC = () => {
  const [name, setName] = useState<string>("x");

  const memoValue = useMemo(() => {
    if (name !== undefined && name.length > 5) {
      return name.length;
    }
    return 0;
  }, [name]);

  return (
    <>
      <h4>名字:{name}</h4>
      <Button onClick={() => setName(name => name + "x")}>改变名字</Button>

      <Son value={memoValue} schools={schools} />
    </>
  );
};

interface SonProps {
  value: number;
  schools: string[];
}

const Son = memo<SonProps>(props => {
  console.log("Son组件渲染", props);

  return <p>Son组件</p>;
});

export default Parent;
